<template>
  <div>
    <a-card>
      <h2>重置列表</h2>
      <a-divider />
      <a-table
        :dataSource="list"
        :columns="columns"
        :pagination="false"
        bordered
      >
        <template #operation="{record}">
          <a-button @click="changeStatus(record._id, 2)" type="primary"
            >批准</a-button
          >
          <a-button
            @click="changeStatus(record._id, 3)"
            type="danger"
            style="margin-left: 10px"
            >忽略</a-button
          >
        </template>
      </a-table>
      <a-divider />
      <div class="mt-10">
        <a-pagination
          v-model:current="curPage"
          :page-size="pageSize"
          :total="total"
          @change="setPage"
        />
      </div>
    </a-card>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { handleResult } from '../helpers/utils'
import { resetPasswordService } from '../services'

export default defineComponent({
  setup () {
    const curPage = ref(1)
    const total = ref(0)
    const pageSize = ref(5)
    const list = ref([])
    const columns = [
      {
        title: '用户名称',
        dataIndex: 'username'
      },
      {
        title: '操作',
        slots: {
          customRender: 'operation'
        }
      }
    ]

    const setPage = page => {
      curPage.value = page
      getlist()
    }

    const getlist = async () => {
      const res = await resetPasswordService.getlist(
        curPage.value,
        pageSize.value
      )
      handleResult(res).success(({ data: { list: l, total: t } }) => {
        l.forEach(item => (item.key = item._id))
        list.value = l
        total.value = t
      })
    }

    onMounted(() => {
      getlist()
    })

    const changeStatus = async (id, status) => {
      const res = await resetPasswordService.updateStatus(id, status)
      handleResult(res).success(({ msg }) => {
        message.success(msg)
      })
    }

    return {
      curPage,
      total,
      pageSize,
      list,
      columns,
      setPage,
      changeStatus
    }
  }
})
</script>

<style lang="scss" scoped></style>
